import React, { Component } from 'react'
import axios from 'axios'
import {connect} from 'react-redux'
import {Type} from '../../../types/food'

interface BigType{
    id:number,
    type:string
}

interface Iprops{
    initData:(list:Type[])=>void,
    list:BigType[],
    history:any
}

class Home extends Component <Iprops>{
    componentDidMount(){
        !this.props.list.length && axios.get('/api/list').then(res => {
            console.log(res.data)
            this.props.initData(res.data);
        })
    }
    render() {
        let {list} = this.props;
        return (
            <div>
                {list.map((item) => <span key={item.id} onClick={
                    () => {
                        this.props.history.push(`/classify/${item.id}`)
                    }
                }>{item.type}</span>)}
            </div>
        )
    }
}

let stateMapToProps = (state:any) => {
    return {
        list:state.list.map((item:Type) => {
            return {
                type:item.type,
                id:item.t_id
            }
        })
    }
}

let dispatchMapToProps = (dispatch:any) => {
    return {
        initData(list:Type[]){
            dispatch({type:'INIT_DATA',list})
        }
    }
}

export default connect(stateMapToProps,dispatchMapToProps)(Home)
